#guide-index{

  .user-box{
    background: #FFFFFF;
    margin-bottom: 20px;
    .item{
      display: flex;
      align-items: center;
      padding: 10px 15px;

      &.disabled{
        .item-left{
          .info-box{
            .top{
              .name{
                color: #959595;
              }
              .type-box{
                background:#959595;
              }
            }
            .bottom{
              color: #959595;
            }
          }
        }
        .item-right{
          border:1px solid #959595;
          color: #959595;
        }
      }

      .item-left{
        display: flex;
        align-items: center;
        flex: 1;
        .img-box{
          width: 54px;
          height: 54px;
          border: 1px solid #e5e5e5;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .info-box{
          flex: 1;
          margin-left: 10px;

          .top{
            display: flex;
            align-items: center;
            .name{
              font-size: 18px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              span{
                font-size: 10px;
              }
            }
            .type-box{
              padding: 1px 5px;
              color: #FFFFFF;
              font-size: 12px;
              background: #d70c18;
              border-radius: 2px;
              margin-left: 10px;

              &.clerk {
                background: #f8b62d;
              }
            }

          }
          .bottom{
            font-size: 15px;
            color: #959595;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .item-right{
        font-size: 13px;
        color: #4a4a4a;
        padding: 4px 10px;
        border:1px solid #4a4a4a;
        border-radius: 3px;
      }

    }
  }
}